<template>
  <div class="goods banxin">
    <!-- 面包屑 -->
    <p>首页 / 全部商品</p>
    <img src="../assets/images/products/banner.png" alt="" />
    <section class="list">
      <div>
        <strong>排序 ：</strong>
        <span
          v-for="(item, index) in paixuArr"
          :key="index"
          :class="{ active: paixuActive == index }"
          @click="changePaixu(item.min, item.max, index)"
        >
          {{ item.txt }}
        </span>
      </div>
      <div>
        <strong>分类 ：</strong>
        <span
          v-for="(item, index) in fenleiArr"
          :key="index"
          :class="{ active: fenleiActive == index }"
          @click="changeFenlei(item.value, index)"
        >
          {{ item.txt }}
        </span>
      </div>
    </section>
    <Products :arr="this.goodsArr" />
  </div>
</template>

<script>
import Products from "@/components/Products.vue";
import { GoodsDataApi } from "@/request/api";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      paixuActive: 0,
      fenleiActive: 0,
      // 排序的数组
      paixuArr: [
        { txt: "全部", min: 0, max: 10000 },
        { txt: "我能兑换的" },
        { txt: "0-500分", min: 0, max: 500 },
        { txt: "500-1000分", min: 500, max: 1000 },
        { txt: "1000-1500分", min: 1000, max: 1500 },
        { txt: "1500-2500分", min: 1500, max: 2500 },
      ],
      // 分类的数组
      fenleiArr: [
        { txt: "全部", value: 0 },
        { txt: "实物商品", value: 1 },
        { txt: "虚拟商品", value: 2 },
      ],

      //   商品数组
      goodsArr: [],
    };
  },

  components: {
    Products,
  },
  watch:{
   $route:{
     handler(newVal,oldVal){
       if(newVal.query.keyword!==oldVal.query.keyword){
         this.$router.go(0)
       }
     }
   }
  },
  created() {
    // 获取从搜索框过来的keyword
    if (this.$route.query.keyword) {
      // console.log(this.$route.query.keyword);
      this.changeGoodsObj({ keyword: this.$route.query.keyword });
    } else {
      this.changeGoodsObj({ keyword: "" });
    }
    this.getGoodsFn();
  },
  computed: {
    ...mapState({
      goodsObj: (state) => state.goods.goodsObj,
    }),
  },
  methods: {
    ...mapMutations({
      changeGoodsObj: "goods/changeGoodsObj",
    }),
    //   点击了排序
    changePaixu(min, max, index) {
      this.changeGoodsObj({ min, max });
      this.paixuActive = index;
      this.getGoodsFn();
    },
    // 点击了分类
    changeFenlei(value, index) {
      this.changeGoodsObj({ type: value });
      this.fenleiActive = index;
      this.getGoodsFn();
    },
    // 发送请求
    getGoodsFn() {
      GoodsDataApi(this.goodsObj).then((res) => {
        if (res.data.code === 0) {
          this.goodsArr = res.data.data;
          // console.log(this.goodsArr);
        }
      });
    },
    // 修改this.goodsObj
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.goods {
  .list {
    padding: 40px 0 10px;
    div {
      margin-bottom: 32px;
      strong {
        font-weight: bold;
        color: #000;
        margin-right: 10px;
      }
      span {
        color: #999;
        cursor: pointer;
        margin-right: 30px;
        &.active {
          color: @blue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>